<template>
	<view>
		<!-- <view style="width: 750upx; top: 0;left: 0;  ">

			<view class="time">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
							{{i18n.finance.incomeAndExpenses}}
						</view>
						<view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
							<picker mode="selector" :value="rank" :range="rankArr" @change="rankChange">
								<view class="picker"> {{rank === '' ? this.i18n.finance.all : rankArr[rank]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
							{{i18n.finance.FinancialType}}
						</view>
						<view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
							<picker mode="selector" :value="rank2" :range="rankArr2" @change="rankChange2" range-key="name">
								<view class="picker">{{rank2 === '' ? this.i18n.finance.all : rankArr2[rank2].name}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="time">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
							{{i18n.finance.start}}
						</view>
						<view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange1">
								<view class="picker">{{date === '' ? this.i18n.finance.all : date}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
								{{i18n.finance.end}}
						</view>
						<view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange2">
								<view class="picker"> {{date2 === '' ? this.i18n.finance.all : date2}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

		</view> -->

		<view class="flex  bg-white ">
			<view class="flex-twice padding-sm radius ">
				<view class="toptext text-right">
					<text style="float: left;">{{i18n.finance.total}}：</text>
					<text style="margin-right: 25px;">{{sum}}</text>
				</view>
			</view>
			<!-- <view class="flex-twice   padding-sm radius ">
				<view class="toptext text-right">
					<text style="float: left;">666</text> 
				</view> 
			</view> -->
		</view>


		<!-- 内容部分 -->
		<scroll-view class="panel-scroll-box" scroll-y="true" @scrolltolower="loadMore" style="margin-top: 5px;">
			<!-- 委托列表 -->
			<view class="cu-list grid col-2 no-border card-menu " style="margin-top: 8px;" v-for="(item, index) in tabItem.newsList"
			 :key="index">
				<view class="cu-item text-left">
					<view class="text-xxl nowrap">{{item.total}}{{item.price}}</view>
					<text class="text-df nowrap">{{item.memo}}</text>
					<!-- <text class="text-df nowrap">{{i18n.finance[myconfig.caiwutype[item.type]]}}</text> -->
				</view>
				<view class="cu-item text-right">
					<view>
						<text class="text-xs">{{item.addtime_text}}</text>
					</view>
				</view>
			</view>
			<!-- 上滑加载更多组件 -->
			<mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
		</scroll-view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	// import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import countdownTime from '@/components/countdown-timer.vue'
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;

	export default {

		components: {
			// mixPulldownRefresh,
			mixLoadMore,
			countdownTime
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				token: '',
				url: '',
				qwe: true,
				asd: false,
				page: 1,
				shouyu: [],
				danwei: [],
				chuyu: [],
				page2: 2,
				date: '',
				date2: '',
				start: '',
				end: '',
				rank: '',
				rank2: '',
				// rankArr: ['收入', '支出'],
				// rankArr2: [],
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				category_id: 0,
				TabCur: 0, //当前选项卡索引
				tabItem: {
					name: 'USDT',
					ptype: 'wall1',
					newsList: [],
					loadMoreStatus: 0, //加载更多 0加载前，1加载中，2没有更多了
					refreshing: 0,
					page: 1,
				},
				sum: 0
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			rankArr2() {
				let arr = [];
				for (let key in this.myconfig.caiwutype) {
					// arr.push(this.myconfig.caiwutype[key])
					arr.push({
						name: this.i18n.finance[this.myconfig.caiwutype[key]],
						'id': key
					})

				}

				return arr
			},
			rankArr() {
				return [this.i18n.finance.income, this.i18n.finance.Expenditure];
			},
		},

		onLoad(data) {
			this.tabItem.ptype = data.index ? data.index : 'wall1'
			uni.setNavigationBarTitle({
				title: this.i18n.user.commission
			});
		},
		mounted() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadNewsList('add');
		},
		methods: {
			//下拉刷新
			onPulldownReresh() {
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			//列表
			loadNewsList(type) {
				let tabItem = this.tabItem;
				console.log(type)
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (tabItem.loadMoreStatus === 2) {
						return;
					}
					tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					tabItem.refreshing = true;
				}
				// #endif

				if (type === 'refresh') {
					tabItem.page = 1;
				}
				// 请求数据
				let send = {
					ptype: tabItem.ptype,
					type: '3',
					page: tabItem.page,
				};
				if (this.rank2 !== '') {
					send.type = this.rankArr2[this.rank2].id;
				}
				if (this.rank !== '') {
					send.rank = this.rank;
				}
				if (this.date !== '') {
					send.start = this.date;
				}
				if (this.date2 !== '') {
					send.end = this.date2;
				}

				this.$http.post('user.caiwu', send).then(res => {
					let list = res.data.list.data;
					this.sum = res.data.sum;
					if (type === 'refresh') {
						tabItem.newsList = []; //刷新前清空数组
						//下拉刷新 关闭刷新动画
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						tabItem.refreshing = false;
						// #endif
						tabItem.loadMoreStatus = 0;
					}
					list.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						tabItem.newsList.push(item);
					})

					tabItem.loadMoreStatus = res.data.current_page >= res.data.last_page ? 2 : 0;
					tabItem.page += 1;
				})

			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange1: function(e) {
				this.date = e.target.value
				console.log(e.target.value)
				this.start = e.target.value
				// this.loadNewsList('refresh')

			},
			bindDateChange2: function(e) {
				this.date2 = e.target.value
				console.log(e.target.value)
				this.end = e.target.value
				this.loadNewsList('refresh')

			},
			rankChange: function(e) {
				this.rank = e.target.value;
				this.loadNewsList('refresh')
			},
			rankChange2: function(e) {
				this.rank2 = e.target.value;
				this.loadNewsList('refresh')
			},
			// tabSelect(e) {
			// 	this.tabCurrentIndex = e.currentTarget.dataset.id;
			// 	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			// }
		}
	}
</script>

<style scoped>
	.cu-item .text-gray {
		width: 45px;
		display: inline-block;
	}

	.row {
		display: inline;
	}

	.bai {
		padding: 6px 12px;
		border-radius: 8px;
	}

	.nowrap {
		white-space: nowrap;
	}

	.cu-list {
		margin-top: 2px;
	}

	.cu-list.grid.no-border {
		padding: 3px 17px;
	}

	.nav .cu-item {
		border: none;
	}

	.nav .cu-item.cur {
		border-bottom: 1px solid;
	}

	.swiper-box {
		min-height: 800px;
	}

	.panel-scroll-box {
		height: 800px;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	.time {
		display: flex;
		justify-content: space-around;
		/* border-bottom: 20upx solid #f1f1f1; */
	}

	.time .uni-list {
		width: 50%;
		text-align: center;
		/* background: #0E1325; */
	}
</style>
